<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  <meta name="author" content="火星科技 http://mars3d.cn ">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="x5-fullscreen" content="true">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

  <!-- 标题及搜索关键字 -->
  <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
  <meta name="description"
    content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS" />

  <link rel="shortcut icon" type="image/x-icon" href="http://mars3d.cn/favicon.ico">
  <title>标绘GLTF小模型 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>


  <!--第三方lib-->
  <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
    include="jquery,font-awesome,web-icons,bootstrap,bootstrap-checkbox,layer,toastr,haoutil,turf,mars3d,mars3d-widget"></script>

  <link href="css/style.css" rel="stylesheet" />
  <style>
    .infoview div {
      margin-bottom: 5px;
    }
  </style>
</head>

<body class="dark">
  <!--加载前进行操作提示，优化用户体验-->
  <div id="mask" class="signmask" onclick="removeMask()"></div>

  <div id="mars3dContainer" class="mars3d-container"></div>


  <div class="infoview">
    <div>
      模型URL：
      <input id="txtModel" type="text" value="http://data.marsgis.cn/gltf/mars/feiji.glb" class="form-control"
        style="width:350px;" />

      <div class="checkbox checkbox-primary checkbox-inline" title="解决跨域问题">
        <input id="chkProxy" class="styled" type="checkbox">
        <label for="chkProxy">
          代理
        </label>
      </div>
      <input type="button" class="btn btn-primary" title="单击后在地图上点选位置即可" value="标绘" onclick="drawModel()" />

    </div>
    <div>
      <div class="checkbox checkbox-primary checkbox-inline" style="margin-left:10px;">
        <input id="chkHasTerrain" class="styled" type="checkbox" checked>
        <label for="chkHasTerrain">
          地形
        </label>
      </div>
      <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkTestTerrain" class="styled" type="checkbox">
        <label for="chkTestTerrain">
          深度检测
        </label>
      </div>
      <div class="checkbox checkbox-primary checkbox-inline" title="屏蔽拾取地形坐标，避免穿透3dtiles模型">
        <input id="chk_onlyPickModelPosition" class="styled" type="checkbox">
        <label for="chk_onlyPickModelPosition">
          仅在3dtiles上标绘
        </label>
      </div>

      <input id="btnImpFile" type="button" class="btn btn-primary" value="打开" />
      <input id="btnSave" type="button" class="btn btn-primary" value="保存" />
      <input id="input_plot_file" type="file" accept=".json" style="display:none;" />
      <input type="button" class="btn btn-danger" value="清除" onclick="deleteAll()" />
    </div>

  </div>

  <!-- 切换视角到模型或地形（山区）的快捷按钮 -->
  <script type="text/javascript" src="js/center_terrain_3dtiles.js"></script>


  <script src="./js/common.js"></script>
  <script type="text/javascript">
    'use script' //开发环境建议开启严格模式

    var map
    var graphicLayer

    function initMap(options) {
      //合并属性参数，可覆盖config.json中的对应配置
      var mapOptions = mars3d.Util.merge(options, {
        scene: {
          center: {
            y: 30.83351,
            x: 116.354467,
            z: 2742.7,
            heading: 359.3,
            pitch: -51.9,
            roll: 0,
          },
          clock: {
            currentTime: '2021-01-01 22:00:00',
          },
        },
      })

      //创建三维地球场景
      map = new mars3d.Map('mars3dContainer', mapOptions)

      //固定光照，避免gltf模型随时间存在亮度不一致。
      map.fixedLight = true

      this.graphicLayer = new mars3d.layer.GraphicLayer({
        hasEdit: true,
        isAutoEditing: true, //绘制完成后是否自动激活编辑
      })
      map.addLayer(graphicLayer)

      var url = haoutil.system.getRequestByName('url')
      if (url) {
        //url传入模型地址
        $('#txtModel').val(url)
      } else {
        var lastData = haoutil.storage.get('gltf_edit')
        if (lastData) {
          //显示历史数据
          $('#txtModel').val(lastData)
        }
      }

      var globe = map.scene.globe

      $('#chkHasTerrain').change(function () {
        var isStkTerrain = $(this).is(':checked')
        map.updateTerrainProvider(isStkTerrain)
      })
      $('#chkTestTerrain').change(function () {
        var val = $(this).is(':checked')
        map.scene.globe.depthTestAgainstTerrain = val
        if (val) {
          toastr.info('深度监测打开后，您将无法看到地下或被地形遮挡的对象。')
        }
      })
      $('#chk_onlyPickModelPosition').change(function () {
        var val = $(this).is(':checked')

        //控制鼠标只取模型上的点，忽略地形上的点的拾取
        map.onlyPickModelPosition = val
      })

      //创建完成，事件监听
      graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
        var graphic = e.graphic
        if (!graphicLayer.isContinued) {
          startEditing(graphic)
        }
      })

      //编辑修改了模型
      graphicLayer.on(
        [mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
        function (e) {
          var graphic = e.graphic
          startEditing(graphic)
        }
      )

      //停止编辑修改模型
      graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
        stopEditing()
      })

      $('#btnSave').click(function () {
        var strResult = graphicLayer.toGeoJSON()
        if (strResult == null) {
          layer.msg('当前没有标注任何数据，无需保存！')
          return
        }
        haoutil.file.downloadFile('模型标绘.json', JSON.stringify(strResult))
      })

      $('#input_plot_file').change(function (e) {
        var file = this.files[0]

        var fileName = file.name
        var fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase()
        if (fileType != 'json') {
          layer.msg('文件类型不合法,请选择json格式标注文件！')
          clearSelectFile()
          return
        }

        if (window.FileReader) {
          var reader = new FileReader()
          reader.readAsText(file, 'UTF-8')
          reader.onloadend = function (e) {
            var json = this.result
            graphicLayer.loadGeoJSON(json, {
              clear: true,
              flyTo: true,
            })

            clearSelectFile()
          }
        }
      })

      $('#btnImpFile').click(function () {
        $('#input_plot_file').click()
      })
    }

    function clearSelectFile() {
      if (!window.addEventListener) {
        document.getElementById('input_plot_file').outerHTML += '' //IE
      } else {
        document.getElementById('input_plot_file').value = '' //FF
      }
    }

    function deleteAll() {
      graphicLayer.clear()
    }

    function drawModel() {
      var url = $('#txtModel').val()
      haoutil.storage.add('gltf_edit', url)

      var isProxy = $('#chkProxy').is(':checked')
      if (isProxy) {
        url = 'http://data.marsgis.cn/proxy/' + url
      }

      graphicLayer.startDraw({
        type: 'model',
        drawShow: true, //绘制时，是否显示模型，可避免在3dtiles上拾取坐标存在问题。
        // editType: 'point', //编辑方式：只调整四周方向和比例
        style: {
          scale: 1,
          url: url,
        },
      })
    }

    //附加：激活属性编辑widget【非必需，可以注释该方法内部代码】
    var timeTik

    function startEditing(graphic) {
      clearTimeout(timeTik)

      var plotAttr = mars3d.widget.getClass('widgets/plotAttr/widget.js')
      if (plotAttr && plotAttr.isActivate) {
        plotAttr.startEditing(graphic, graphic.coordinates)
      } else {
        mars3d.widget.activate({
          map: map,
          uri: 'widgets/plotAttr/widget.js',
          name: '属性编辑',
          graphic: graphic,
          lonlats: graphic.coordinates,
        })
      }
    }

    function stopEditing() {
      timeTik = setTimeout(function () {
        mars3d.widget.disable('widgets/plotAttr/widget.js')
      }, 200)
    }
    //附加：激活属性编辑widget【非必需，可以注释该方法内部代码】
  </script>
</body>

</html>
